<template>
  <div v-for="(question, index) in questions" style="float: none" class="content">
    <div v-if="getType(question) === 0">
      <choice :options="question.options" :title="question.title"
              :question-amount="question.questionAmount" :type="question.type"
              :serial="index+1">
      </choice>
    </div>
    <div v-else-if="getType(question) === 1">
      <score :options="question.options" :title="question.title"
             :question-amount="question.questionAmount"
             :serial="index+1" :type="'评分题'">
      </score>
    </div>
    <div v-else>
      <completion :question-id="question.questionId" :serial="index+1"
                  :title="question.title" :type="'填空题'" :question-amount="question.questionAmount"></completion>
    </div>
    <el-divider></el-divider>
  </div>
  <el-backtop></el-backtop>
</template>

<script>
import Choice from "../components/Choice";
import Score from "../components/Score"
import Completion from "../components/Completion"
import qs from "qs";

const axios = require("axios");

export default {
  name: "Analysis",
  components: {
    Choice,
    Score,
    Completion,
  },
  created() {
    this.getInfo()
  },
  data() {
    return {
      questionnaireTitle: '',
      questions: [],
    }
  },
  methods: {
    getInfo() {
      const questionnaireId = this.$route.query.questionnaireId
      const data = {
        questionnaireId: questionnaireId
      }
      axios.post('/api/questionnaire/getInfo', qs.stringify(data)).then((res => {
        if(res.data.code === 0) {
          console.log(res);
          this.questionnaireTitle = res.data.data.questionnaireTitle
          this.questions = res.data.data.questions

        } else {
          this.$message.error(res.data.msg)
        }
      }))
    },
    getType(question) {
      if(question.type === 'radio' || question.type === 'checkbox') return 0
      else if(question.type === 'score') return 1
      else if(question.type === 'completion') return 2
    },

  }
}
</script>

<style scoped>
.head {
  margin-top: 20px;
  margin-left: 100px;
}

.content {
  margin-left: 20%;
  /*width: 100%;*/
  margin-top: 50px;
}

.score {
  width: 540px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.completion {
  width: 540px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

}

.el-divider {
  width: 60%;
  border-top: 1px dashed #e8eaec;
  margin-top: 50px;
}
</style>